<template>
  <div class="header">
    <!-- 头部 左部分 icon小图标 -->
    <div class="header-left">
      <a href="#" class="link-icon">
        <div class="iconfont">&#xe600;</div>
        <p>产品服务</p>
      </a>
      <a href="#" class="link-icon">
        <div class="iconfont">&#xe62a;</div>
        <p>工作台</p>
      </a>
      <a href="#" class="link-icon">
        <div class="iconfont">&#xe63e;</div>
        <p>柠檬豆</p>
      </a>
    </div>
    <!-- 头部 右部分 用户信息 -->
    <div class="header-right">
      <div class="changer">
        <p>你好！Changer</p>
        <a href="#">切换到供应商</a>
      </div>
      <div class="user-icon">
        <img src="../../assets/img/1.png" alt="user">
      </div>
      <a href="#" class="exit">
        <div class="iconfont">&#xe603;</div>
        <p>退出</p>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header'
}
</script>

<style lang="less" scoped>
  @import '~styles/total.less';
  .header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 80px;
    border-bottom: 2px solid #d6d6d6;
    // 左部分 icon小图标
    .header-left {
      display: flex;
      justify-content: space-around;
      width: 280px;
      .link-icon {
        display: block;
        text-align: center;
        div {
          color: #898989;
          font-size: 24px;
        }
        p {
          color: #898989;
          font-size: 8px;
          line-height: 12px;
          font-weight: bold;
          font-style: italic;
        }
      }
      .link-icon:hover {
        div {
          color: @orange;
        }
        p {
          color: @orange;
        }
      }
    }
    // 用户信息
    .header-right {
      display: flex;
      justify-content: space-around;
      width: 300px;
      border-left: 1px solid #d0d0d0;
      .changer {
        height: 60px;
        p {
          font-size: 16px;
          line-height: 30px;
          color: @orange;
        }
        a {
          display: block;
          width: 100%;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 2px;
          background-color: @orange;
          color: #fff;
          font-size: 14px;
        }
      }
      .user-icon {
        height: 60px;
        img {
          width: 60px;
          height: 60px;
        }
      }
      .exit {
        display: block;
        align-self: center;
        div {
          width: 25px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          border-radius: 50%;
          background-color: @orange;
          color: #fff;
          font-size: 20px;
          margin: 0 auto;
        }
        p {
          color: @blackText;
          font-size: 16px;
          line-height: 24px;
        }
      }
      .exit:hover {
        div {
          background-color: rgb(245, 179, 57);
        }
        p {
          color: @orange;
        }
      }
    }
  }
</style>
